<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<form class="form-validation">
			<div>
				<label>名字</label>
				<input
					type="text"
					placeholder="请输入你的名字(1到10个中文)"
					pattern="^[\u4e00-\u9fa5]{1,10}$"
					required
				/>
			</div>
			<div>
				<label>手机</label>
				<input
					type="text"
					placeholder="请输入你的手机"
					pattern="^1[3456789]\d{9}$"
					required
				/>
			</div>
			<div>
				<label>简介</label>
				<textarea required></textarea>
			</div>
		</form>
		<input class="ios-switch" type="checkbox" />

		<div class="bubble-box">iCSS</div>
		<div class="bubble-empty-box">iCSS</div>
	</body>
	<style>
		.form-validation {
			width: 500px;
			div + div {
				margin-top: 10px;
			}
			label {
				display: block;
				padding-bottom: 5px;
				font-weight: bold;
				font-size: 16px;
			}
			input,
			textarea {
				display: block;
				padding: 0 20px;
				border: 1px solid #ccc;
				border-left: 5px solid #ccc;
				width: 100%;
				height: 40px;
				outline: none;
				caret-color: #09f;
				transition: all 300ms;
				&:valid {
					border-color: #3c9;
				}
				&:invalid {
					border-color: #f66;
				}
			}
			textarea {
				height: 122px;
				resize: none;
				line-height: 30px;
				font-size: 16px;
			}
		}
		.ios-switch {
			position: relative;
			appearance: none;
			cursor: pointer;
			transition: all 100ms;
			border-radius: 31px;
			width: 102px;
			height: 62px;
			background-color: #e9e9eb;
			&::before {
				position: absolute;
				content: "";
				transition: all 300ms cubic-bezier(0.45, 1, 0.4, 1);
				border-radius: 31px;
				width: 102px;
				height: 62px;
				background-color: #e9e9eb;
			}
			&::after {
				position: absolute;
				left: 4px;
				top: 4px;
				border-radius: 27px;
				width: 54px;
				height: 54px;
				background-color: #fff;
				box-shadow: 1px 1px 5px rgba(#000, 0.3);
				content: "";
				transition: all 300ms cubic-bezier(0.4, 0.4, 0.25, 1.35);
			}
			&:checked {
				background-color: #5eb662;
				&::before {
					transform: scale(0);
				}
				&::after {
					transform: translateX(40px);
				}
			}
		}
		.bubble-box {
			position: relative;
			border-radius: 5px;
			width: 200px;
			height: 50px;
			background-color: #f90;
			line-height: 50px;
			text-align: center;
			font-size: 20px;
			color: #fff;
			&::after {
				position: absolute;
				left: 100%;
				top: 50%;
				margin-top: -5px;
				border: 5px solid transparent;
				border-left-color: #f90;
				content: "";
			}
		}
		.bubble-empty-box {
			position: relative;
			margin-top: 10px;
			border: 2px solid #f90;
			border-radius: 5px;
			width: 200px;
			height: 50px;
			line-height: 46px;
			text-align: center;
			font-size: 20px;
			color: #f90;
			&::before {
				position: absolute;
				left: 100%;
				top: 50%;
				margin: -5px 0 0 2px;
				border: 5px solid transparent;
				border-left-color: #f90;
				content: "";
			}
			&::after {
				position: absolute;
				left: 100%;
				top: 50%;
				margin-top: -4px;
				border: 4px solid transparent;
				border-left-color: #fff;
				content: "";
			}
		}
	</style>
</html>
